import React, { Component, Fragment } from "react";
import "./style.css";
class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      list: [],
    };
  }

  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor="inputArea">输入内容</label>
          <input
            id="inputArea"
            className="input"
            value={this.state.inputValue}
            onChange={this.handlerInputChange.bind(this)}
          />
          <button onClick={this.handlerButtonClick.bind(this)}>提交</button>
        </div>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={index}
                onClick={this.handlerItemClick.bind(this, index)}
                dangerouslySetInnerHTML={{ __html: item }}
              > 
              </li>
            );
          })}
        </ul>
      </Fragment>
    );
  }

  handlerInputChange(e) {
    this.setState({
      inputValue: e.target.value,
    });
  }
  handlerButtonClick(e) {
    if (!this.state.inputValue) return "";
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: "",
    });
  }
  handlerItemClick(index, e) {
    let list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list,
    });
  }
}

export default TodoList;
